<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE>
<html>

<head>
    <title>快递物流</title>

    <link href="${ctx}/statics/bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="${ctx}/statics/styles/navbar.css" rel="stylesheet"/>
    <!--tags input-->
    <link href="${ctx}/statics/bootstrap/plugin/tagsinput/bootstrap-tagsinput.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css"
          href="${ctx}/statics/bootstrap/plugin/tagsinput/bootstrap-tagsinput-typeahead.css">


    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet"
          href="${ctx}/statics/bootstrap/plugin/bootstrap-select-1.11.2/dist/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="${ctx}/statics/styles/index.css"/>

    <style>
        @media screen and (min-width: 769px) {
            .logo-margin {
                margin-top:60px;
                margin-bottom: 20px;;
            }
        }
        @media screen and (max-width: 768px) {
            .logo-margin {
                margin-top:20px;
                margin-bottom: 20px;
            }
        }


    </style>
</head>


<div class="col-sm-offset-2 col-sm-8">
    <div class="row" ><div class="col-sm-offset-4 col-sm-4 logo-margin"><img id="" width="auto"
                                                                                             height="50px"
                                                                                             src="${ctx}/statics/images/logo-1.png"
                                                                                             alt="logo"></div></div>
    <div class="row" style="margin-bottom: 80px;">
        <div class="col-sm-offset-2 col-sm-8">
            <div class="form-inline">
                <div class="input-group col-sm-9">
                    <input type="hidden" name="com" id="input-exp-simple-name" value="shunfeng">
            <span class="input-group-addon" style="width:100px; padding: 0px;line-height: 31px"><img id="img-exp-image" width="100px"
                                                                                        height="31px"
                                                                                        src="http://app2.showapi.com/img/expImg/shunfeng.jpg"
                                                                                        alt="顺丰速运"></span>
                    <!-- /btn-group -->
                        <input id="input-saarch-exp-nu" class="form-control"  type="text" placeholder="请输入物流单号">

                </div>
                <button id="idSearchExp" type="button" class="btn btn-warning">&nbsp;&nbsp;&nbsp;&nbsp;<span
                        class="glyphicon glyphicon-search"></span>查询&nbsp;&nbsp;&nbsp;&nbsp;</button>
            </div>
            <div class="panel panel-default" id="idExpTracePanel" style="display: none;">
                <div class="panel-body">
                    <table class="table " id="idExpTraceTable">
                        <thead>
                        <tr>
                            <th>时间</th>
                            <th></th>
                            <th>地点和跟踪进度</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
                <div class="panel-footer"></div>
            </div>
        </div>


    </div>

    <div class="row">
        <div class="col-xs-4 col-md-2">
            <a href="#" class="thumbnail express-link" data-my-exp-simpleName="shunfeng"
               data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/shunfeng.jpg"> <img
                    src="http://app2.showapi.com/img/expImg/shunfeng.jpg" alt="..."></a>
        </div>
        <div class="col-xs-4 col-md-2">
            <a href="#" class="thumbnail express-link" data-my-exp-simpleName="shentong"
               data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/shentong.jpg"> <img
                    src="http://app2.showapi.com/img/expImg/shentong.jpg" alt="..."></a>
        </div>
        <div class="col-xs-4 col-md-2">
            <a href="#" class="thumbnail express-link" data-my-exp-simpleName="yuantong"
               data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/yuantong.jpg"><img
                    src="http://app2.showapi.com/img/expImg/yuantong.jpg" alt="..."></a>
        </div>
        <div class="col-xs-4 col-md-2">
            <a href="#" class="thumbnail express-link" data-my-exp-simpleName="yunda"
               data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/yunda.jpg"> <img
                    src="http://app2.showapi.com/img/expImg/yunda.jpg"
                    alt="..."></a>
        </div>
        <div class="col-xs-4 col-md-2">
            <a href="#" class="thumbnail express-link" data-my-exp-simpleName="zhongtong"
               data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/zto.jpg"> <img
                    src="http://app2.showapi.com/img/expImg/zto.jpg"
                    alt="..."></a>
        </div>
        <div class="col-xs-4 col-md-2">
            <a href="#" class="thumbnail  express-link" data-my-exp-simpleName="huitong"
               data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/ht.jpg"> <img
                    src="http://app2.showapi.com/img/expImg/ht.jpg" alt="..."></a></div>
        <div class="col-xs-4 col-md-2"><a href="#" class="thumbnail express-link" data-my-exp-simpleName="debang"
                                          data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/dbwl_logo.gif"> <img
                src="http://app2.showapi.com/img/expImg/dbwl_logo.gif" alt="..."></a>
        </div>
        <div class="col-xs-4 col-md-2"><a href="#" class="thumbnail express-link" data-my-exp-simpleName="zhaijisong"
                                          data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/zjs_logo.gif"> <img
                src="http://app2.showapi.com/img/expImg/zjs_logo.gif" alt="..."></a></div>

    </div>


    <div class="panel panel-default">
        <div class="panel-body">

            <table class="company-list">
                <tbody>
                <tr>
                    <td>常用</td>
                    <td>
                        <ul>
                            <li><a href="#" class="express-link" data-my-exp-simpleName="shunfeng"
                                   data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/shunfeng.jpg">顺丰速运</a></li>
                            <li><a href="#" class="express-link" data-my-exp-simpleName="shentong"
                                   data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/shentong.jpg">申通快递</a></li>
                            <li><a href="#" class="express-link" data-my-exp-simpleName="yuantong"
                                   data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/yuantong.jpg">圆通速递</a></li>
                            <li><a href="#" class="express-link" data-my-exp-simpleName="yunda"
                                   data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/yunda.jpg">韵达快运</a></li>
                            <li><a href="#" class="express-link" data-my-exp-simpleName="zhongtong"
                                   data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/zto.jpg">中通快递</a></li>
                            <li><a href="#" class="express-link" data-my-exp-simpleName="huitong"
                                   data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/ht.jpg">百世快递</a></li>
                            <li><a href="#" class="express-link" data-my-exp-simpleName="debang"
                                   data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/dbwl_logo.gif">德邦物流</a></li>
                            <li><a href="#" class="express-link" data-my-exp-simpleName="zhaijisong"
                                   data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/zjs_logo.gif">宅急送</a></li>

                        </ul>
                    </td>
                </tr>


                <c:set var="fistLetter" value="A" scope="page"/>
                <tr>
                    <td>${fistLetter}</td>
                    <td>
                        <ul>

                            <c:forEach var="express" items="${expressList}" varStatus="index">
                            <c:if test="${fn:toUpperCase(fn:substring(express.simpleName,0,1)) != fistLetter}">
                                <c:set var="fistLetter"
                                       value="${fn:toUpperCase(fn:substring(express.simpleName,0,1))}"/>
                            <tr>
                                <td>${fistLetter}</td>
                                <td>
                                    <ul>
                                        </c:if>
                                        <li><a href="#" class="express-link"
                                               data-my-exp-simpleName="${express.simpleName}"
                                               data-my-exp-imgUrl="${express.imgUrl}">${express.expName}</a></li>
                                        </c:forEach>
                                    </ul>
                                </td>
                            </tr>

                </tbody>
            </table>
        </div>
    </div>
</div>


<script src="${ctx}/statics/js/jquery-3.1.1.min.js"></script>
<script src="${ctx}/statics/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctx}/statics/commonjs/typeahead.bundle.js"></script>
<script src="${ctx}/statics/bootstrap/plugin/tagsinput/bootstrap-tagsinput.js"></script>
<!--<script src="statics/bootstrap/plugin/validator/dist/js/bootstrapValidator.min.js"></script>-->
<!--<script src="statics/bootstrap/plugin/validator/dist/js/language/zh_CN.js"></script>-->
<script src="${ctx}/statics/commonjs/validator.min.js"></script>
<script src="${ctx}/statics/echarts/echarts.min.js"></script>
<script src="${ctx}/statics/js/index.js"></script>

<script type="application/javascript">
    $(function () {
        //加载快递公司
        $(".express-link").click(function () {
            //获取simpleName和imageUrl
            console.log($(this));
            var simpleName = $(this).attr("data-my-exp-simpleName");
            var imgUrl = $(this).attr("data-my-exp-imgUrl");
            $("#input-exp-simple-name").val(simpleName);
            $("#img-exp-image").attr("src", imgUrl);
            $("#img-exp-image").attr("alt", $(this).html());


        });


    });


    $("#idSearchExp").click(function () {
        var comName = $("#input-exp-simple-name").val();
        var waybillNo = $("#input-saarch-exp-nu").val();
        $("#idExpTracePanel").hide();
        $("#idExpTraceTable tbody").empty();
        $.ajax({
            url: '${ctx}/express/info',
            type: 'get',
            contentTypeString: 'application/x-www-form-urlencoded',
            dataType: 'json',
            data: {com: comName, nu: waybillNo},
            success: function (data, textStatus, jqXHR) {

                if (data.status == 0) {
                    //"status":-1 待查询 0 查询异常 1 暂无记录 2 在途中 3 派送中 4 已签收 5 用户拒签 6 疑难件 7 无效单
                    var expRlt = data.data;

                    var statusMsg = "";
                    switch (expRlt.status) {
                        case -1:
                            statusMsg = "待查询";
                            break;
                        case 0:
                            statusMsg = "查询异常";
                            break;
                        case 1:
                            statusMsg = "暂无记录";
                            break;
                        case 2:
                            statusMsg = "在途中";
                            break;
                        case 3:
                            statusMsg = "派送中";
                            break;
                        case 4:
                            statusMsg = "已签收";
                            break;
                        case 5:
                            statusMsg = "用户拒签";
                            break;
                        case 6:
                            statusMsg = "疑难件";
                            break;
                        case 7 :
                            statusMsg = "无效单";
                            break;
                    }

                    //显示

                    var htmlStr = "";
                    if (expRlt.status >= 2) {
                        $.each(expRlt.data, function (index, item) {

                            htmlStr += "<tr>" +
                                    "<td> <small>" + item.time.substring(0, 10) + "</small><br><span>" + item.time.substring(11, 16) + "</span></td>" +
                                    "<td><span class='glyphicon glyphicon-record'></span></td> " +
                                    "<td>" + item.context + "</td> </tr>";

                        });
                    } else {

                        htmlStr = "<tr>" +
                                "<td> <small></small><br><span></span></td>" +
                                "<td><span class='glyphicon glyphicon-record'></span></td> " +
                                "<td>" + statusMsg + "</td> </tr>";

                    }


                    $("#idExpTraceTable tbody").empty();
                    $("#idExpTraceTable tbody").append(htmlStr);
                    $("#idExpTracePanel").show();


                } else {

                    var htmlStr = "<tr>" +
                            "<td> <small></small><br><span></span></td>" +
                            "<td><span class='glyphicon glyphicon-record'></span></td> " +
                            "<td>"+data.message+"</td> </tr>";

                    $("#idExpTraceTable tbody").empty();
                    $("#idExpTraceTable tbody").append(htmlStr);
                    $("#idExpTracePanel").show();
                }


            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // 通常 textStatus 和 errorThrown 之中
                // 只有一个会包含信息
                console.log(XMLHttpRequest);
                console.log(textStatus)
                this; // 调用本次AJAX请求时传递的options参数
            }
        });
    });


</script>


</body>

</html>